<?php
use yii\widgets\ActiveForm;
use yii\helpers\Html ;
?>
<div class="wrap">
    <div class="title">问题反馈</div>
    <?php $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data'],"id"=>"form"]) ?>
    <div class="question">
        <div class="item">
            <div class="le">描述<span>*</span></div>
            <div class="ri hei">
                <?= Html::activeTextarea($model,"desc",["id"=>"describe", "placeholder"=>"描述详情"])?>
            </div>
        </div>
        <div class="pic">
            <div class="ti">问题图片一</div>
            <div class="imgBox">
                <div class="del"></div>
            </div>
            <div class="btn">
                <label for="addImg1"><span></span>上传照片</label>
                <?= Html::activeFileInput($model,"pic_url1",["id"=>"addImg1","accept"=>"image/*"])?>
            </div>
        </div>
        <div class="pic">
            <div class="ti">问题图片二</div>
            <div class="imgBox">
                <div class="del"></div>
            </div>
            <div class="btn">
                <label for="addImg2"><span></span>上传照片</label>
                <?= Html::activeFileInput($model,"pic_url2",["id"=>"addImg2","accept"=>"image/*"])?>
            </div>
        </div>
        <div class="pic">
            <div class="ti">问题图片三</div>
            <div class="imgBox">
                <div class="del"></div>
            </div>
            <div class="btn">
                <label for="addImg3"><span></span>上传照片</label>
                <?= Html::activeFileInput($model,"pic_url3",["id"=>"addImg3","accept"=>"image/*"])?>
            </div>
        </div>
        <div class="pic">
            <div class="ti">上传视频</div>
            <div class="imgBox">
                <div class="del"></div>
            </div>
            <div class="btn">
                <label for="addVideo"><span></span>上传视频</label>
                <?= Html::activeFileInput($model,"video_url",["id"=>"addVideo","accept"=>"video/*"])?>
            </div>
        </div>
        <div class="item">
            <div class="le">公司名称<span>*</span></div>
            <div class="ri">
                <?= Html::activeTextInput($model,"company_name",["id"=>"company", "placeholder"=>"公司名称"])?>
            </div>
        </div>
        <div class="item">
            <div class="le">联系人<span>*</span></div>
            <div class="ri">
                <?= Html::activeTextInput($model,"contact_name",["id"=>"contact_name", "placeholder"=>"联系人"])?>
            </div>
        </div>
        <div class="item">
            <div class="le">联系方式<span>*</span></div>
            <div class="ri">
                <?= Html::activeTextInput($model,"contact",["id"=>"contact", "placeholder"=>"联系方式"])?>
            </div>
        </div>
        <div class="item">
            <div class="le">地址<span>*</span></div>
            <div class="ri">
                <?= Html::activeTextInput($model,"address",["id"=>"address", "placeholder"=>"地址"])?>
            </div>
        </div>
        <input type="button" class="submit" value="提交" />
    </div>
    <?php ActiveForm::end() ?>
    <!-- <input type="file" accept="video/*"> -->
</div>

<div class="loading"></div>
<div class="dialogue">
    <div class="content">
        <p><?=$msg?></p>
        <button onclick="hideDialogue()">关闭</button>
    </div>
</div>

<script type="text/javascript">
    let showLoading = function(){
        $('.loading').css('display', 'flex')
    }
    let showDialogue = function(){
        $('.dialogue').css('display', 'flex')
    }
    let hideLoading = function(){
        $('.loading').hide()
    }
    let hideDialogue = function(close){ //close为ture就关闭页面
        $('.dialogue').hide()
        if(close){
            closePage()
        }
    }
    let closePage = function(){
        try{
            window.close()
        }
        catch(e){}
        try{
            WeixinJSBridge.call('closeWindow');
        }
        catch(e){}
    }

    <?php if(!empty($msg)):?>
    showDialogue();
    <?php endif;?>

    var getObjectURL = function (file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
    };
    $('.question').on('change', '#addImg1, #addImg2, #addImg3', function(){
        console.log($(this)[0].files)
        let img = getObjectURL($(this)[0].files[0])
        $(this).parents('.pic').find('.imgBox').append('<div class="img"><div><image src="' + img + '" /></div></div>').show()
        $(this).parent().hide()
    })
    $('.imgBox .del').click(function(){
        $(this).parent().hide()
        let btn = $(this).parents('.pic').find('.btn'),
            input = btn.find('input')
        imgs = $(this).parents('.pic').find('.imgBox .img, .imgBox .video')
        input[0].value = ''
        imgs.remove()
        btn.show()
    })
    $('#addVideo').change(function(){
        let img = getObjectURL($(this)[0].files[0])
        $(this).parents('.pic').find('.imgBox').append('<div class="video"><div class="box"><video src="' + img + '"  controls="controls"></video></div></div>').show()
        $(this).parent().hide()
    })
    $('.submit').click(function(){
        let describe = $('#describe').val(),
            company = $('#company').val(),
            contact = $('#contact').val(),
            address = $('#address').val(),
            contact_name = $("#contact_name").val(),
            img1 = $('#addImg1')[0].files[0],
            img2 = $('#addImg2')[0].files[0],
            img3 = $('#addImg3')[0].files[0],
            video = $('#addVideo')[0].files[0]
        if(!describe){
            alert('描述不能为空！')
            return
        }
        if(!company){
            alert('公司名称不能为空！')
            return
        }
        if(!contact){
            alert('联系方式不能为空！')
            return
        }
        if(!contact_name){
            alert('联系人不能为空！')
            return
        }
        if(!address){
            alert('地址不能为空！')
            return
        }
        if(!img1 && !img2 && !img3 && !video){
            alert('图片、视频至少有一个！')
            return
        }
        showLoading();
        $("#form").submit() ;
        //doing
    })
</script>